/**
* 头部菜单
*/ 
<template>
  <el-menu class="el-menu-demo"
   mode="horizontal" 
   background-color="#eaedf1"
    text-color="rgb(55, 61, 65)"
    active-text-color="#004894">
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo1.png" alt="">
    </div>
    <el-button class="buttonimg">
      <img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)">
    </el-button>
    <el-dropdown trigger="hover" class="mydropdown" @visible-change="dropDownHandle">
      <span class="el-dropdown-link dropdownTitle">
        超级管理员<i :class="{ active: dropDownStatu }" class="el-icon-caret-bottom el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <router-link to="/myIndex/indexEchart" class="inlineBlock" style="text-decoration:none">
        <el-dropdown-item>
           <span>
                <i class="el-icon-house"></i>
                首 页</span>
        </el-dropdown-item>
        </router-link>
        <el-dropdown-item style="border-top:1px solid #ebeef5;border-bottom:1px solid #ebeef5">
           <span @click="exit()" >
                <i class="el-icon-attract"></i>
                安 全 登 出</span>
        </el-dropdown-item>
        <el-dropdown-item>
           <span @click="about()">
                <i class="el-icon-c-scale-to-original"></i>
                关&nbsp;&nbsp;于</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-menu>
</template>
<script>
import { loginout } from '../api/userMG'
export default {
  name: 'navcon',
  data() {
    return {
      collapsed: true,
      imgshow: require('../assets/img/show.png'),
      imgsq: require('../assets/img/sq.png'),
      user: {},
      dropDownStatu: false,
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.user = JSON.parse(localStorage.getItem('userdata'))
  },
  methods: {
    // 退出登录
    exit() {
      this.$confirm('退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit('logout', 'false')
            this.$router.push({ path: '/login' })
            this.$message({
              type: 'success',
              message: '已退出登录!'
            })
          }, 1000)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    about(){
      var date = new Date();
      //年 getFullYear()：四位数字返回年份
      var year = date.getFullYear(); //getFullYear()代替getYear()
      //月 getMonth()：0 ~ 11
      var month = date.getMonth() + 1;
      //日 getDate()：(1 ~ 31)
      var day = date.getDate();
      //时 getHours()：(0 ~ 23)
      var hour = date.getHours();
      //分 getMinutes()： (0 ~ 59)
      var minute = date.getMinutes();
      function addZero(s){
         return s < 10 ? ('0' + s) : s;
      }
      var tips='疫情防控管理信息系统' + '\xa0' 
      var time = year + '-' + addZero(month) + '-' + addZero(day) + ' ' + addZero(hour) + ':' + addZero(minute);
      // this.$alert("版本信息：" + tips + time, "关于", {
      //   confirmButtonText: "确定",
      //   showConfirmButton: false,
      // });
      this.$alert("版本信息：" + tips + time, '关于', {
          confirmButtonText: '确定',
          showConfirmButton: false,
          callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
    },
    // addZero(s) {
    //     return s < 10 ? ('0' + s) : s;
    // },
    // 切换显示
    toggle(showtype) {
      this.collapsed = !showtype
      this.$root.Bus.$emit('toggle', this.collapsed)
    },
    dropDownHandle(isShow) {
      this.dropDownStatu = isShow;
    },
  }
}
</script>
<style scoped>  
.dropdownTitle i {
        color:rgb(92, 92, 92);
        font-size: 18px;
        line-height: 60px;
        margin: 0 17px 0 7px;
        transition: 0.3s;

        
}
.dropdownTitle .active {
          transform: rotate(180deg);
}
.logobox {
  background: transparent;
  width: 200px;
  height: 60px;
  float: left;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.logoimg {
  height: 40px;
}
.dropdownTitle{
  height: 60px;
  line-height: 60px;
  color: rgb(92, 92, 92);
  padding-right: 15px;
  cursor: pointer;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
.mydropdown {
  float: right;
}
.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
  color: rgb(92, 92, 92);
}
.showimg {
  width: 26px;
  height: 26px;
  transition: 0.3s;
  /* position: absolute;
  top: 17px;
  left: 17px; */
}
.showimg:active {
  border: none;
}
.el-dropdown-menu__item:not(.is-disabled):hover{
  background-color: #d0dbec;
    color: #004894;
}
.el-dropdown-menu__item--divided{
  border-top: 1px solid #ebeef5;
}
</style>